<template>
  <div class="box">
    <hu-card :pb='0' v-show="MixinSelectShow">
      <el-form :model="searchData" label-width="100px">
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="searchData.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工号">
              <el-input v-model="searchData.code" placeholder="请输入工号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input placeholder="请输入联系电话" v-model="searchData.phoneNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="searchFromButton">
              <el-button type="primary" @click="getTreeData" icon="el-icon-search">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
              <cut-is-show :CutisShow.sync="MixinShowSearch"></cut-is-show>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="MixinShowSearch" :gutter="50">
          <el-col :span="6">
            <el-form-item label="角色" prop="grade">
              <el-select style="width: 100%" v-model="searchData.roleIds" placeholder="请选择角色">
                <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组织机构" prop="grade">
              <el-select style="width: 100%" v-model="searchData.orgId" placeholder="请选择单位名称">
                <el-option v-for="dict in orgList" :key="dict.id" :value="dict.id" :label="dict.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </hu-card>
    <hu-card>
      <el-row :gutter="10" class="mb10 space_between" type="flex">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" @click="addClick">新增</el-button>
          <el-button type="success" icon="el-icon-refresh" @click="resetClickAll">批量重置密码</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteClickAll">批量删除</el-button>
        </el-col>
        <right-toolbar :tableCol.sync="tableCol" :showSearch.sync="MixinSelectShow" @queryTable="getTreeData"></right-toolbar>
      </el-row>
      <hu-table :tableData="tableData" :loading="loading" :tableCol="tableCol" @selection-change="handleSelectionChange">
        <template v-slot:isOpen="{ row }">
          <span>{{ row.isOpen ? '公开' : '不公开' }}</span>
        </template>
        <template v-slot:del="{ row }">
          <span v-if="row.del">
            <el-button size="mini" round plain type="danger">禁用</el-button>
          </span>
          <span v-else>
            <el-button size="mini" round plain type="success">启用</el-button>
          </span>
        </template>
        <template v-slot:name="{ row }">
          <el-button type="text" @click="handleCheck(row)">{{
            row.name
          }}</el-button>
        </template>
        <!--  -->
        <template v-slot:head="{ row }">
          <el-image v-if="row.headPortraitPath" class="head_img" fit="fill" :src="$config.imgUrl + row.headPortraitPath" :preview-src-list="[$config.imgUrl + row.headPortraitPath]">
          </el-image>
          <img v-else src="@/assets/images/morenImg.png" style="height: 30px; height: 30px; " />
        </template>
        <template v-slot:roles="{ row }">
          <el-tag style="font-size: 12px; margin: 5px" v-for="(item, index) in row.roles" :key="index">{{ item.name
          }}</el-tag>
        </template>
        <template v-slot:operate="{ row }">
          <el-button type="text" @click="resetPassword(row.id)">重置密码</el-button>
          <el-button type="text" @click="editClick(row)">修改</el-button>
          <el-button type="text" style="color: #fe5a57" @click="deleteClick(row.id)">删除</el-button>
        </template>
      </hu-table>
      <pagination v-show="total > 0" :total="total" :page.sync="searchData.pageNum" :limit.sync="searchData.pageSize" @pagination="getList" />
    </hu-card>
    <hu-modal :title="title" :show-modal.sync="dialogVisible" :loading="loading" @submit="submitForm">
      <el-form ref="formOwn" :model="form" :rules="rulesData" label-width="80px">
        <el-collapse v-model="activeNames" class="collapse_style">

          <el-collapse-item name="1">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">头像</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="头像">
                    <img-upload :fileList="fileList" :limit="1" @change="getImg" @remove="getImg"></img-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">基本信息</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="工号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入用户工号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="组织机构" required>
                    <el-input placeholder="请选择组织机构" readonly v-model="form.parentName">
                      <el-button slot="append" icon="el-icon-search" @click="fatherShow = true"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="身份证">
                    <el-input v-model="form.identityCardNo" placeholder="请输入身份证" @blur="inputBlur"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生年月">
                    <el-date-picker v-model="form.birthDate" disabled type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别" prop="gender">
                    <el-select style="width: 100%" v-model="form.gender" placeholder="请选择性别">
                      <el-option v-for="dict in sexList" :key="dict.label" :value="dict.label" :label="dict.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="岗位" prop="post">
                    <el-select style="width: 100%" v-model="form.postName" placeholder="请选择岗位">
                      <el-option v-for="dict in dict.type.gw" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setPositionId(dict)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="职称" prop="title">
                    <el-select style="width: 100%" v-model="form.title" placeholder="请选择职称">
                      <el-option v-for="dict in dict.type.zc" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="专业" prop="speciality">
                    <el-select style="width: 100%" v-model="form.speciality" placeholder="请选择专业">
                      <el-option v-for="dict in dict.type.zy" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="职业资格" prop="professional">
                    <el-select style="width: 100%" v-model="form.professional" placeholder="请选择职业资格">
                      <el-option v-for="dict in dict.type.zyzg" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="政治面貌" prop="outLook">
                    <el-select style="width: 100%" v-model="form.outLook" placeholder="请选择政治面貌">
                      <el-option v-for="dict in dict.type.zzmm" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入厂日期" prop="hiredate">
                    <el-date-picker v-model="form.hiredate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="入厂日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">教育背景</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="学历" prop="educationName">
                    <el-select style="width: 100%" v-model="form.educationName" placeholder="请选择学历">
                      <el-option v-for="dict in dict.type.xl" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setEducationId(dict)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业院校" prop="graduateSchool">
                    <el-input v-model="form.graduateSchool" placeholder="请输入毕业院校"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业日期" prop="graduateDate">
                    <el-date-picker v-model="form.graduateDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="毕业日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="附件" prop="educationFiles">
                    <f-upload accept=".doc, .docx, .pdf, .jpg, .tif, .png, .xls, .xlsx" :fileList.sync="form.educationFiles" @remove="removeFile"></f-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">联系信息</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="手机号" prop="phoneNo">
                    <el-input v-model="form.phoneNo" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="固定电话" prop="fixedPhoneNo">
                    <el-input v-model="form.fixedPhoneNo" placeholder="请输入固定电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="传真" prop="fax">
                    <el-input v-model="form.fax" placeholder="请输入传真"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮编" prop="postCode">
                    <el-input v-model="form.postCode" placeholder="请输入邮编"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱地址" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">用户权限</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="组织权限" required>
                    <el-input placeholder="请选择组织机构" readonly v-model="orgScopeName">
                      <el-button slot="append" icon="el-icon-search" @click="fatherShow1 = true"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="角色" class="is-required" prop="roleIds">
                    <el-select style="width: 100%" multiple v-model="form.roleIds" placeholder="请选择角色">
                      <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>

    </hu-modal>
    <hu-modal title="查看-用户" :show-modal.sync="dialogVisible2" :loading="loading" :submit="false">
      <el-form :model="form" disabled label-width="100px">
        <el-collapse v-model="activeNames" class="collapse_style">

          <el-collapse-item name="1">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">头像</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="头像">
                    <img-upload :fileList="fileList" :limit="1" @change="getImg" @remove="getImg"></img-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">基本信息</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="工号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入用户工号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="组织机构" required>
                    <el-input placeholder="请选择组织机构" readonly v-model="form.parentName">
                      <el-button slot="append" icon="el-icon-search" @click="fatherShow = true"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="身份证">
                    <el-input v-model="form.identityCardNo" placeholder="请输入身份证" @blur="inputBlur"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生年月">
                    <el-date-picker v-model="form.birthDate" disabled type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别" prop="gender">
                    <el-select style="width: 100%" v-model="form.gender" placeholder="请选择性别">
                      <el-option v-for="dict in sexList" :key="dict.label" :value="dict.label" :label="dict.value">
                      </el-option>
                      <!-- @click.native="setSex(dict)" -->
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="岗位" prop="post">
                    <el-select style="width: 100%" v-model="form.postName" placeholder="请选择岗位">
                      <el-option v-for="dict in dict.type.gw" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setPositionId(dict)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="职称" prop="title">
                    <el-select style="width: 100%" v-model="form.title" placeholder="请选择职称">
                      <el-option v-for="dict in dict.type.zc" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="专业" prop="speciality">
                    <el-select style="width: 100%" v-model="form.speciality" placeholder="请选择专业">
                      <el-option v-for="dict in dict.type.zy" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="职业资格" prop="professional">
                    <el-select style="width: 100%" v-model="form.professional" placeholder="请选择职业资格">
                      <el-option v-for="dict in dict.type.zyzg" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="政治面貌" prop="outLook">
                    <el-select style="width: 100%" v-model="form.outLook" placeholder="请选择政治面貌">
                      <el-option v-for="dict in dict.type.zzmm" :key="dict.value" :value="dict.value" :label="dict.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入厂日期" prop="hiredate">
                    <el-date-picker v-model="form.hiredate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="入厂日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">教育背景</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="学历" prop="educationName">
                    <el-select style="width: 100%" v-model="form.educationName" placeholder="请选择学历">
                      <el-option v-for="dict in dict.type.xl" :key="dict.value" :label="dict.label" :value="dict.value" @click.native="setEducationId(dict)">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业院校" prop="graduateSchool">
                    <el-input v-model="form.graduateSchool" placeholder="请输入毕业院校"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业日期" prop="graduateDate">
                    <el-date-picker v-model="form.graduateDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="毕业日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="附件" prop="educationFiles">
                    <f-upload accept=".doc, .docx, .pdf, .jpg, .tif, .png, .xls, .xlsx" :fileList.sync="form.educationFiles" @remove="removeFile"></f-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">联系信息</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="手机号" prop="phoneNo">
                    <el-input v-model="form.phoneNo" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="固定电话" prop="fixedPhoneNo">
                    <el-input v-model="form.fixedPhoneNo" placeholder="请输入固定电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="传真" prop="fax">
                    <el-input v-model="form.fax" placeholder="请输入传真"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮编" prop="postCode">
                    <el-input v-model="form.postCode" placeholder="请输入邮编"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱地址" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">用户权限</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="组织权限" required>
                    <el-input placeholder="请选择组织机构" readonly v-model="orgScopeName">
                      <el-button slot="append" icon="el-icon-search" @click="fatherShow1 = true"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="角色" class="is-required" prop="roleIds">
                    <el-select style="width: 100%" multiple v-model="form.roleIds" placeholder="请选择角色">
                      <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="6">
            <template slot="title">
              <div><span class="basic_div"></span><span class="basic_title">操作日志</span></div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="创建人">
                    {{form.createUserName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间">
                    {{form.ctime}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="最后修改人">
                    {{form.updateUserName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="最后修改时间">
                    {{form.utime}}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>

    </hu-modal>
    <!-- 组织 -->
    <hu-drawer title="部门选择" :open.sync="fatherShow" ref="designDialog" :loading="MixinLoading" @submit="fatherShow = false">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <div class="treeBorder">
        <el-tree class="treeBorder" node-key="id" ref="tree" :filter-node-method="filterNode" :data="treeData" @node-click="handleCheckChange" :props="defaultProps">
        </el-tree>
      </div>
    </hu-drawer>
    <!-- 组织权限 -->
    <hu-drawer title="组织权限" :open.sync="fatherShow1" ref="designDialog2" :loading="MixinLoading" @submit="getChecked">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText1">
      </el-input>
      <div class="treeBorder">
        <el-tree :data="dataScopeList" ref="tree1" accordion show-checkbox :check-strictly="true" @check="treeChange" node-key="id" :default-checked-keys="checktree" :filter-node-method="filterNode1" :props="defaultProps1">
        </el-tree>
      </div>
    </hu-drawer>
  </div>
</template>

<script>
import {
  getList,
  userAdd,
  userEdit,
  editPass,
  getTree,
  treeDel,
  getEditData,
  orgData,
  gxUserUpdate,
  getQxList,
  resetPassword,
} from "@/api/system/user.js";
import dataDetails from "./components/dataDetails.vue";
import { rolegetList, approved } from "@/api/system/role";
export default {
  name: "SystemUser",
  components: {
    dataDetails,
  },
  dicts: ["gw", "xl", "zc", "zy", "zyzg", "zzmm"],
  data() {
    return {
      activeNames: ["1", "2", "3", "4", "5", "6"],
      orgList: [],
      orgScopeName: "",
      checktree: [],
      cascaderProps1: {
        multiple: true,
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "child",
      },
      sexList: [
        {
          value: "男",
          label: true,
        },
        {
          value: "女",
          label: false,
        },
      ],
      cascaderProps: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "child",
      },
      typeData: [],
      fileList: [],
      // 文件类型, 例如['png', 'jpg', 'jpeg']
      loading: false,
      ids: [],
      treeData: [],
      treeData1: [],
      total: 0,
      filterText: "",
      filterText1: "",
      fatherShow: false,
      fatherShow1: false,
      defaultProps: {
        children: "child",
        label: "name",
      },
      defaultProps1: {
        children: "childs",
        label: "name",
      },
      dialogVisible: false,
      dialogVisible2: false,
      roleList: [],
      title: "",
      searchData: {
        name: undefined,
        code: "",
        contractorType: undefined,
        serviceType: undefined,
        qualificationsLevel: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      tableCol: [
        {
          type: "selection",
          width: "55",
        },
        {
          title: "序号",
          type: "index",
          width: "55",
        },
        {
          title: "组织机构",
          key: "directOrgName",
        },
        {
          title: "姓名",
          slot: "name",
        },
        {
          title: "头像",
          slot: "head",
        },
        {
          title: "工号",
          key: "code",
        },

        {
          title: "角色状态",
          slot: "del",
        },
        // {
        //   title: "部门",
        //   key: "org",
        // },
        {
          title: "角色",
          showOverflowTooltip: false,
          width: "300",
          key: "org",
          slot: "roles",
        },
        {
          title: "操作",
          slot: "operate",
          width: 200,
        },
      ],
      tableData: [],
      form: {
        id: undefined,
        name: undefined,
        code: undefined,
        phoneNo: undefined,
        email: undefined,
        identityCardNo: undefined,
        orgId: undefined,
        roleIds: undefined,
        orgScopeIds: [],
        headPortrait: undefined,
        educationFiles: [],
      },
      rulesData: {
        name: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "用户工号不能为空", trigger: "blur" },
        ],
        identityCardNo: [
          { required: true, message: "身份证不能为空", trigger: "blur" },
        ],
        orgId: [
          { required: true, message: "组织机构不能为空", trigger: "change" },
        ],
      },
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入工号", trigger: "blur" }],
        hiredate: [{ required: true, message: "请选择日期", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        identityCardNo: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        parentName: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
      },
      userList: {},
      // 判断添加修改
      addTrue: false,
      treeJurisdiction: {},
      dataScopeList: [],
    };
  },
  watch: {
    filterText1(val) {
      this.$refs.tree1.filter(val);
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getOrgData();
    this.getTreeData();
    this.deptList();
    this.getTree();
  },
  mounted() {
    this.$refs.designDialog.$children[0].rendered = true;
    this.$refs.designDialog2.$children[0].rendered = true;
  },
  methods: {
    resetQuery() {
      this.searchData = {
        name: undefined,
        code: "",
        contractorType: undefined,
        serviceType: undefined,
        qualificationsLevel: undefined,
        pageNum: 1,
        pageSize: 10,
      };
    },
    inputBlur() {
      let num = "";
      if (this.form.identityCardNo) {
        let date = this.form.identityCardNo.slice(6, 14);
        num =
          date.slice(0, 4) + "-" + date.slice(4, 6) + "-" + date.slice(6, 8);
      } else {
        num = "";
      }
      this.$set(this.form, "birthDate", num);
    },
    removeFile(arr) {
      if (!arr[0].raw) {
        if (!this.form.removeEducationFileIds) {
          this.form.removeEducationFileIds = [];
        }
        this.form.removeEducationFileIds.push(arr[0].id);
      }
    },
    getOrgData() {
      orgData().then(({ result }) => {
        this.orgList = result;
      });
    },
    treeChange(res, ste) {
      const tree = this.$refs.tree1.getCheckedKeys();
      if (res.level === 1) {
        if (tree.indexOf(res.id) !== -1) {
          this.$refs.tree1.setCheckedNodes(
            this.searchDisabled(res.childs, true)
          );
          this.$refs.tree1.setCheckedKeys([res.id]);
        } else {
          this.$refs.tree1.setCheckedNodes(
            this.searchDisabled(res.childs, false)
          );
          this.$refs.tree1.setCheckedKeys([]);
        }
        // if (res.level === 2 || res.level === 3)
      } else {
        if (tree.indexOf(res.id) !== -1) {
          const treeXin = res.childs.map((e) => e.id);
          const treeResult = [res.id];
          tree.forEach((item) => {
            if (treeXin.indexOf(item) === -1) {
              treeResult.push(item);
            }
          });
          this.$refs.tree1.setCheckedNodes(
            this.searchDisabled(res.childs, true)
          );
          this.$refs.tree1.setCheckedKeys(treeResult);
        } else {
          const treeXin = res.childs.map((e) => e.id);
          treeXin.push(res.id);
          const treeResult = [];
          tree.forEach((item) => {
            if (treeXin.indexOf(item) === -1) {
              treeResult.push(item);
            }
          });
          this.$refs.tree1.setCheckedNodes(
            this.searchDisabled(res.childs, false)
          );
          this.$refs.tree1.setCheckedKeys(treeResult);
        }
      }
    },
    // 设置岗位ID
    setPositionId(dict) {
      this.$set(this.form, "post", dict.value);
    },
    // 设置学历ID
    setEducationId(dict) {
      this.$set(this.form, "education", dict.value);
    },
    // 设置性别
    setSex(dict) {
      this.$set(this.form, "sexName", dict.value);
    },
    // 表单重置
    reset() {
      if (this.$refs.tree1) {
        this.$refs.tree1.setCheckedKeys([]);
      }
      this.orgScopeName = "";
      this.checktree = [];
      this.fileList = [];
      this.form = {
        id: undefined,
        name: undefined,
        code: undefined,
        phoneNo: undefined,
        email: undefined,
        identityCardNo: undefined,
        orgId: undefined,
        roleIds: [],
        orgScopeIds: [],
        headPortrait: undefined,
        educationFiles: [],
      };
      this.treeJurisdiction = {};
      this.resetForm("formOwn");
    },
    getImg(arrFile) {
      this.fileList = arrFile[1];
      this.form.headPortrait = arrFile[1].length
        ? arrFile[1][0].raw
        : undefined;
    },
    getChecked() {
      this.orgScopeName = this.$refs.tree1
        .getCheckedNodes()
        .map((e) => e.name)
        .join("，");

      const treeList = this.$refs.tree1.getCheckedNodes();
      let isChooseNd = false;
      const chooseOrgIds = [];
      treeList.forEach((prams) => {
        if (prams.level === 1) {
          isChooseNd = true;
        } else if (prams.level === 2) {
          chooseOrgIds.push(prams.id);
        } else if (prams.level === 3) {
          chooseOrgIds.push(Number(prams.id.slice(0, prams.id.length - 5)));
        } else {
          chooseOrgIds.push(prams.id);
        }
      });
      this.treeJurisdiction = {
        isChooseNd,
        chooseOrgIds,
      };
      this.fatherShow1 = false;
      // return
      // this.form.orgScopeIds = this.$refs.tree1.getCheckedKeys()
    },
    submitForm() {
      this.$refs["formOwn"].validate((valid) => {
        if (valid) {
          const httpRow = {
            ...this.form,
          };
          const params = {
            ...this.treeJurisdiction,
            userId: this.form.id,
          };
          const formData = new FormData();
          for (const key in httpRow) {
            if (httpRow[key] || httpRow[key] == 0) {
              if (key === "educationFiles") {
                httpRow[key].forEach((item) => {
                  if (!item.id) {
                    formData.append(key, item.raw);
                  }
                });
              } else {
                formData.append(key, httpRow[key]);
              }
            }
          }
          if (!params.chooseOrgIds) return this.$modal.msg("请选择权限");
          if (httpRow.id != undefined) {
            gxUserUpdate(params); // 更新权限
            userEdit(formData).then((response) => {
              this.$store.dispatch("GetMation").then(() => {});
              this.$modal.msgSuccess("修改成功");
              this.dialogVisible = false;
              this.getTreeData();
            });
          } else {
            userAdd(formData).then(({ result }) => {
              gxUserUpdate({
                userId: result,
                ...this.treeJurisdiction,
              }); // 更新权限
              this.$store.dispatch("GetMation").then(() => {});
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.getTreeData();
            });
          }
        }
      });
    },
    // 多选框 table
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    deleteClickAll() {
      if (!this.ids.length) return this.$modal.msgWarning("请先勾选数据项");
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return treeDel(this.ids.join(","));
        })
        .then(() => {
          this.$store.dispatch("GetMation");
          this.getTreeData();
          this.$modal.msgSuccess("删除成功");
        });
    },
    deleteClick(id) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return treeDel(id);
        })
        .then(() => {
          this.getTreeData();
          this.$modal.msgSuccess("删除成功");
        });
    },
    getTree() {
      getTree().then(({ result, stateCode }) => {
        if (stateCode == 200) {
          this.treeData = [this.mapTree(result)];
        }
      });
    },
    mapTree: function (org) {
      const haveChildren = Array.isArray(org.child) && org.child.length > 0;
      return {
        ...org,
        child: haveChildren ? org.child.map((i) => this.mapTree(i)) : undefined,
      };
    },
    passClick(row) {
      const that = this;
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.deleteTree();

          editPass(row.id).then((res) => {
            if (res.stateCode == 200) {
              that.$message({
                message: "重置成功",
                type: "success",
              });
            }
          });
        })
        .catch(() => {});
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    filterNode1(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    deptList() {
      // 查询角色列表
      rolegetList().then((res) => {
        if (res.stateCode === 200) {
          this.roleList = res.result;
        }
      });
    },
    auditClick(row) {
      this.$modal
        .confirm("确认需要审批通过吗？")
        .then(() => {
          return approved(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("审批成功");
        });
    },
    handleCheckChange(data) {
      this.form.parentName = data.name;
      this.form.orgId = data.id;
    },
    resetForm() {
      this.dialogVisible = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    ok(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formSubmit) {
            userAdd(this.form).then((res) => {
              if (res.stateCode === 200) {
                this.$store.dispatch("GetMation");
                this.$message({
                  message: "添加成功",
                  type: "success",
                });

                this.getTreeData();
                this.dialogVisible = false;
                if (this.$refs["form"] !== undefined) {
                  this.$refs["form"].resetFields();
                }
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            });
          } else {
            userEdit(this.form).then((res) => {
              if (res.stateCode === 200) {
                this.$store.dispatch("GetMation");
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.getTreeData();
                this.dialogVisible = false;
                if (this.$refs["form"] !== undefined) {
                  this.$refs["form"].resetFields();
                }
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            });
          }
        } else {
          return false;
        }
      });
      return;
    },
    addClick() {
      this.reset();
      this.getJuTree();
      this.title = "添加-用户";
      this.addTrue = true;
      this.dialogVisible = true;
    },
    getJuTree() {
      getQxList(this.$store.getters.userInfo.id).then((res) => {
        this.dataScopeList = this.searchTree([res.result]);
      });
    },
    editClick(row) {
      this.reset();
      this.addTrue = false;
      getEditData(row.id).then((res) => {
        if (res.stateCode === 200) {
          this.form = {
            id: row.id,
            code: row.code,
            name: row.name,
            parentName: row.directOrgName,
            orgId: row.orgId,
            identityCardNo: row.identityCardNo,
            gender: row.gender,
            postName: row.postName,
            post: row.post,
            title: row.title,
            speciality: row.speciality,
            professional: row.professional,
            outLook: row.outLook,
            hiredate: row.hiredate,
            educationName: row.educationName,
            education: row.education,
            graduateSchool: row.graduateSchool,
            graduateDate: row.graduateDate,
            phoneNo: row.phoneNo,
            fixedPhoneNo: row.fixedPhoneNo,
            fax: row.fax,
            address: row.address,
            postCode: row.postCode,
            email: row.email,
            orgScopeIds: row.orgScopeIds,
            roleIds: row.roles.map((e) => e.id),
            educationFiles: row.files
              ? row.files.map((e) => ({
                  ...e,
                  name: e.originalName,
                }))
              : [],

            // age: row.age,
            // sex: row.sex,
            // sexName: row.gender == 0 ? "男" : "女",
            // departmentName: res.result.departmentName,
          };
          // 头像
          if (row.headPortraitPath) {
            this.fileList = [
              {
                url: row.headPortraitPath,
                id: row.headPortraitId,
              },
            ];
          }
          this.checktree = row.orgScopeIds;
          this.inputBlur();
          this.dataScopeList = this.searchTree([res.result.dataScope]);
          // 组织权限
          this.$nextTick(() => {
            const data = this.returnHome(this.dataScopeList);
            this.orgScopeName = data.map((e) => e.name).join(",");
            data.forEach((prams) => {
              this.$refs.tree1.setCheckedNodes(
                this.searchDisabled(prams.childs, true)
              );
            });
            this.$refs.tree1.setCheckedKeys(data.map((e) => e.id));
            this.getChecked();
          });
          // 组织权限 end
        }
      });
      this.title = "修改-用户";
      this.dialogVisible = true;
    },
    // 查看
    handleCheck(row) {
      this.reset();
      this.addTrue = false;
      getEditData(row.id).then(({ result }) => {
        this.form = {
          id: row.id,
          code: row.code,
          name: row.name,
          parentName: row.directOrgName,
          orgId: row.orgId,
          identityCardNo: row.identityCardNo,
          gender: row.gender,
          postName: row.postName,
          post: row.post,
          title: row.title,
          speciality: row.speciality,
          professional: row.professional,
          outLook: row.outLook,
          hiredate: row.hiredate,
          educationName: row.educationName,
          education: row.education,
          graduateSchool: row.graduateSchool,
          graduateDate: row.graduateDate,
          phoneNo: row.phoneNo,
          fixedPhoneNo: row.fixedPhoneNo,
          fax: row.fax,
          address: row.address,
          postCode: row.postCode,
          email: row.email,
          orgScopeIds: row.orgScopeIds,
          roleIds: row.roles.map((e) => e.id),
          educationFiles: row.files
            ? row.files.map((e) => ({
                ...e,
                name: e.originalName,
              }))
            : [],
          updateUserName: row.updateUserName,
          utime: row.utime,
          createUserName: row.createUserName,
          ctime: row.ctime,
        };
        // 头像
        if (row.headPortraitPath) {
          this.fileList = [
            {
              url: row.headPortraitPath,
              id: row.headPortraitId,
            },
          ];
        }
        this.checktree = row.orgScopeIds;
        this.inputBlur();
        this.dataScopeList = this.searchTree([result.dataScope]);
        // 组织权限
        this.$nextTick(() => {
          const data = this.returnHome(this.dataScopeList);
          this.orgScopeName = data.map((e) => e.name).join(",");
          data.forEach((prams) => {
            this.$refs.tree1.setCheckedNodes(
              this.searchDisabled(prams.childs, true)
            );
          });
          this.$refs.tree1.setCheckedKeys(data.map((e) => e.id));
          this.getChecked();
        });
        // 组织权限 end
      });
      this.dialogVisible2 = true;
    },
    searchTree(array, levelName = "level", childrenName = "childs") {
      if (!Array.isArray(array)) return [];
      const recursive = (array, level = 0) => {
        level++;
        return array.map((v) => {
          if (level === 3) {
            v.id = `${v.id}-item`;
          }
          v[levelName] = level;
          const child = v[childrenName];
          if (child && child.length) recursive(child, level);
          return v;
        });
      };
      return recursive(array);
    },
    searchDisabled(array, ste = true) {
      if (!Array.isArray(array)) return [];
      const recursive = (array) => {
        return array.map((v) => {
          this.$set(v, "disabled", ste);
          const child = v["childs"];
          if (child && child.length) recursive(child);
          return v;
        });
      };
      return recursive(array);
    },
    // 回填 组织权限
    returnHome(array) {
      const arr = [];
      if (!Array.isArray(array)) return [];
      const recursive = (array, level = 0) => {
        array.forEach((v) => {
          if (v.choose === 1) {
            arr.push(v);
            if (v.level === 1 || v.level === 2) return;
          }
          const child = v["childs"];
          if (child && child.length) recursive(child, level);
          return v;
        });
        return arr;
      };
      return recursive(array);
    },
    getTreeData() {
      this.loading = true;
      this.searchData.pageNum = 1;
      this.getList();
    },
    getList() {
      getList({ ...this.searchData, dataScopeCheck: true }).then((res) => {
        if (res.stateCode === 200) {
          this.loading = false;
          this.total = res.result.total;
          this.tableData = res.result.records;
        }
      });
    },
    //重置密码
    resetPassword(value) {
      this.$confirm("确认重置密码为：Nd2024!$%", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            code: value,
          };
          resetPassword(value).then((result) => {
            if (result.stateCode == 200) {
              this.$message({
                type: "success",
                message: "重置密码成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    //批量重置密码
    resetClickAll() {
      if (!this.ids.length) return this.$modal.msgWarning("请先勾选数据项");
      this.$confirm("确认重置密码为：Nd2024!$%", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPassword(this.ids.join(",")).then((result) => {
            if (result.stateCode == 200) {
              this.$message({
                type: "success",
                message: "重置密码成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.floterClass {
  /* width: 180px; */
  float: right;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.head_img {
  height: 30px;
  border-radius: 50%;
}
</style>
